<div class="newDisk">
    <div class="disk-body">

        <div>
            <div class="disk-top">
                <h3>热门新碟</h3>
            </div>
            <ul>

                <li>
                    <div>
                        <img src="rank-imgs/disk01.png" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">人间四季</a></p>
                    <p><a href="#">尤长靖</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/disk02.png" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">廿</a></p>
                    <p><a href="#">王一博</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/disk03.png" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">洛城</a></p>
                    <p><a href="#">薛之谦</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/disk04.png" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">信徒</a></p>
                    <p><a href="#">谢帝</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/disk05.png" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">最后的水族馆</a></p>
                    <p><a href="#">裘德</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/disk06.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">I'M MORE SOBER WHEN I'M DRUNK</a></p>
                    <p><a href="#">韦礼安</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/disk07.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">学友 经典 世界巡回演唱会 台北站 (Live)</a></p>
                    <p><a href="#">张学友</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/disk08.png" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">异界来客</a></p>
                    <p><a href="#">幼稚园杀手</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/disk09.png" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">对等关系</a></p>
                    <p><a href="#">李荣浩&nbsp;/&nbsp;张惠妹</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/disk10.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">孤勇者</a></p>
                    <p><a href="#">陈奕迅</a></p>
                </li>

            </ul>
        </div>

        <div>

            <div class="disk-top">
                <h3>全部新碟</h3>
                <ol>
                    <li><a href="#">全部</a></li>
                    <li></li>
                    <li><a href="#">华语</a></li>
                    <li></li>
                    <li><a href="#">欧美</a></li>
                    <li></li>
                    <li><a href="#">韩国</a></li>
                    <li></li>
                    <li><a href="#">日本</a></li>
                </ol>
            </div>

            <ul>

                <li>
                    <div>
                        <img src="rank-imgs/ad1.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">A Dangerous Thing</a></p>
                    <p><a href="#">AURORA</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/ad2.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">Don’t Wake Me Up</a></p>
                    <p><a href="#">Jonas Blue</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/ad3.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">Queen of Ice (Nora En Pure Remix)</a></p>
                    <p><a href="#">Claptone</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/ad4.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">Dear Fear</a></p>
                    <p><a href="#">KOTA The Friend</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/ad5.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">Wherever You Go (feat. John Martin) [Alan Walker Remix]</a></p>
                    <p><a href="#">Alok</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/bd1.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">Leaving (Live from Studio S2)</a></p>
                    <p><a href="#">Hania Rani</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/bd2.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">Purple Sun</a></p>
                    <p><a href="#">Cannons</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/bd3.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">postcard from Milan</a></p>
                    <p><a href="#">Oscar Anton</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/bd4.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">Blacklight</a></p>
                    <p><a href="#">Grazze</a></p>
                </li>

                <li>
                    <div>
                        <img src="rank-imgs/bd5.jpg" alt="">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <p><a href="#">Human Heart</a></p>
                    <p><a href="#">Marc Benjamin</a></p>
                </li>

            </ul>

        </div>

        <div class="pages">
            <a class="pre" href="javascript:void(0);">上一页</a>
            <a class="curr" href="javascript:void(0);">1</a>
            <a href="javascript:void(0);">2</a>
            <a href="javascript:void(0);">3</a>
            <a href="javascript:void(0);">4</a>
            <a href="javascript:void(0);">5</a>
            <a href="javascript:void(0);">6</a>
            <a href="javascript:void(0);">7</a>
            <a href="javascript:void(0);">8</a>
            <a href="javascript:void(0);">9</a>
            <i>...</i>
            <a href="javascript:void(0);">10503</a>
            <a class="next" href="javascript:void(0);">下一页</a>
        </div>

    </div>
</div>


<script>
    var li_eles = document.querySelectorAll('.disk-body>div>ul>li');
    for (i = 0; i < li_eles.length; i++) {
        li_eles[i].children[0].addEventListener('mouseenter', function () {
            this.children[2].style.display = 'block';
        });
        li_eles[i].children[0].addEventListener('mouseleave', function () {
            this.children[2].style.display = 'none';
        });
    }

    var page_eles = document.getElementsByClassName('pages')[0];
    page_a_eles = page_eles.children;
    for (i = 1; i < page_a_eles.length - 1; i++) {
        page_a_eles[i].onclick = function () {
            var curr_a_ele = document.getElementsByClassName('curr')[0];
            curr_a_ele.className = '';
            this.className = 'curr';
        }
    }

</script>